<script lang='ts' setup>
import { codeToHtml } from 'shiki'

const props =  withDefaults(defineProps<{
  lang?: string,
  code: string
}>(), {
  lang: 'javascript',
  code: ''
})
const codeHtml = ref('');

// const isDark = useDark()
async function code2Html(code: string) {
  codeHtml.value = await codeToHtml(code, {
    // theme: isDark.value ? 'vitesse-dark' : 'vitesse-light',
    theme: 'vitesse-light',
    lang: props.lang
  }) // default renderer, replace with yours
}

watch(() => props.code, val => {
  code2Html(val)
})

onMounted(async () => {
  code2Html(props.code)
})

// watch(isDark, () =>{
//   code2Html(props.code)
// },{
//   immediate: true
// })
</script>

<template >
  <div v-html="codeHtml" class="preview-code-container"></div>
</template>

<style>
.preview-code-container {
  width: 100%;
  height: 100%;
}
.preview-code-container span {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
}
</style>
